<template>
  <view class="content">
    <!-- 		showDate: String,
		statusInfo: Array,
		//swiper是否包含内边距
		:showDate="showDate" :statusInfo="statusInfo" @showDate="showDate"
		isFullwidth: Boolean -->
    <view class="header">
      <view class="header-l"><uni-icons type="left" size="32"></uni-icons></view>
      <view class="header-c">{{ dateStr }}</view>
      <view class="header-r"><u-icon name="right" size="32"></u-icon></view>
    </view>
    <cx-calendar
      ref="calendar"
      swiperBg="#fff"
      swiperItemWidth="85%"
      @changeDate="showDate"
      @dateItemClick="dateClick"
    ></cx-calendar>

    <view class="footer">
      <button class="nowdate" size="mini" type="primary" @tap="goToday">{{ title }}</button>
      <text class="current-date"
        >当前日期：<text>{{ date }}</text></text
      >
      <text class="current-date"
        >用户点击了：<text>{{ clickDate }} </text></text
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '回到今天',
      date: '',
      clickDate: '',
      statusInfo: [],
    };
  },
  computed: {
    dateStr() {
      return this.getYearMonthStr(this.date);
    },
  },
  onLoad() {},
  mounted() {
    let now = new Date();
    this.$refs.calendar.fristShow(now.getFullYear() + '-0' + (now.getMonth() + 1) + '-0' + now.getDate(), [
      { date: '2021-08-05', statusText: '已执行', color: '#007aff', opt: { name: '123' } },
    ]);
  },
  methods: {
    getYearMonthStr(date) {
      const arr = date.split('-');
      return `${arr[0]}年${arr[1]}月`;
    },
    goToday() {
      let now = new Date();
      this.$refs.calendar.fristShow(now.getFullYear() + '-0' + (now.getMonth() + 1) + '-0' + now.getDate(), [
        { date: '2021-08-04', statusText: '已执行', color: '#007aff', opt: [{ date: 'name', age: '12' }] },
      ]);
    },
    dateClick(dateObj) {
      //{year:yearTemp,month:monthTemp,day:dayTemp}
      console.log(dateObj);
      this.clickDate = dateObj.year + '-' + dateObj.month + '-' + dateObj.day;
    },
    showDate(newDate) {
      console.log('show date!! ==> 开始发送网络请求！' + newDate);
      setTimeout(() => {
        this.$refs.calendar.show(newDate, []);
        this.date = newDate;
        this.clickDate = '';
      }, 0);
    },
    goNow() {
      let now = new Date();
      this.$refs.calendar.fristShow(now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate(), [
        { date: '2021-08-04', statusText: '已执行', color: '#007aff' },
      ]);
    },
    showDate1(currentItemDate) {
      //发送网络请求，请求数据后改变 showDate，statusInfo
      this.showDate = currentItemDate;
      //中断之前的请求任务；
      getPreRequestTask().abort();
      let requestTask = 发送网络请求.callback(() => {
        if (this.showDate == currentItemDate) {
          //更新statusInfo
        }
      });
      arr.push(requestTask);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: #fff;
  .header {
    display: flex;
    flex-wrap: nowrap;
    font-size: 48rpx;
    padding: 20rpx 30rpx;
    &-l {
      display: flex;
      flex-basis: 20%;
      justify-content: flex-start;
    }

    &-c {
      display: flex;
      flex-basis: 60%;
      justify-content: center;
    }

    &-r {
      display: flex;
      flex-basis: 20%;
      justify-content: flex-end;
    }
  }
  .footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
    .current-date {
      padding: 5px;
      text {
        color: #007aff;
      }
    }
  }
}
</style>
